// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useCallback } from 'react';
import {
  ReactFlow,
  Handle, 
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';
import 'reactflow/dist/style.css';


// const CustomIconNode= ({ data }) => {
//   return (
//     <div style={{ background: 'lightgreen', padding: '10px', borderRadius: '5px', display: 'flex', alignItems: 'center' }}>
//       <img src="https://iconfont.alicdn.com/p/illus/preview_image/6DCpzl5Xujsn/9317c0a3-26fd-464e-bf3b-2a721259fc29.png" 
//             alt="图标" style={{ width: '20px', height: '20px', marginRight: '5px' }} />
//       {data.label}
//       {/* 左侧输入 */}
//       <Handle type="target" position="left" id="left"/>
//       {/* 顶部输入 */}
//       <Handle 
//         type="target" position="top" id="top" style={{ left: '50%', transform: 'translateX(-50%)' }} 
//       />
//       {/* 右侧输出 */}
//       <Handle type="source" position="right" id="right"/>
//     </div>
//   );
// };

const CustomIconNode= ({ data }) => {
  return (
    <div style={{ background: 'lightgreen', padding: '10px', borderRadius: '5px', display: 'flex', alignItems: 'center' }}>
      <img src="https://iconfont.alicdn.com/p/illus/preview_image/6DCpzl5Xujsn/9317c0a3-26fd-464e-bf3b-2a721259fc29.png" 
            alt="图标" style={{ width: '20px', height: '20px', marginRight: '5px' }} />
      {data.label}
      {/* 左侧输入1 - 顶部位置 */}
      <Handle
        type="target"
        position="left"
        id="left-top"
        style={{ top: '30%' }} // 通过top定位
      />
      
      {/* 左侧输入2 - 底部位置 */}
      <Handle
        type="target"
        position="left"
        id="left-bottom"
        style={{ top: '70%' }} // 通过top定位
      />

      {/* 顶部输入 */}
      <Handle 
        type="target"
        position="top"
        id="top"
        style={{ left: '50%', transform: 'translateX(-50%)' }}
      />
      
      {/* 右侧输出 */}
      <Handle
        type="source"
        position="right"
        id="right"
      />
    </div>
  );
};

const nodeTypes = {
  customNode: CustomIconNode,
};

// 节点配置
const customIconNode = {
  id: '1',
  type: 'customNode',       // 指定自定义类型
  data: { label: 'CustomIconNode' },
  position: { x: 100, y: 100 },  // 调整到可见位置
};

const initialNodes = [customIconNode];
const initialEdges = [];

export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        nodeTypes= {nodeTypes}  // 注册自定义类型
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}